<template>
	<view class="beijingse mainpadding">
		<!-- 筛选弹出层 -->
		<u-popup :show="show" @close="close" mode="bottom" :round="10">
			<view class="mainpadding">
				<view class="titletext textcenter">筛选</view>
				<view class="margin_top strongtext">时间</view>
				<view class="flexleft flex_wrap">
					<view class="flexcenter sanshi margin_top2" v-for="item in timeList" :key="item.id"
						@click="selecTimeBtn(item.id)">
						<view :class="item.id==selecttime?'haungsebtn':'huisebtn'">
							{{item.name}}
						</view>
						<!-- <view class="huisebtn">今日</view> -->
					</view>
				</view>
				<!-- 时间 -->
				<view class="margin_top strongtext">自定义时间</view>
				<view class="flexcenter margin_top2" @click="zdysj">
					<view class="shijianbtn margin_right3" @click="zshijian">{{startime}}</view>
					<view class="xian margin_right3"></view>
					<view class="shijianbtn" @click="yshijian">{{endtime}}</view>
				</view>
				<u-datetime-picker :show="zshow" @confirm="zconfirm" v-model="value1" mode="date"
					@cancel="zshow= false"></u-datetime-picker>
				<u-datetime-picker :show="yshow" @confirm="yconfirm" v-model="value2" mode="date" @cancel="yshow= false"
					:minDate="mindate"></u-datetime-picker>
				<view class="bigbtn margin_top" @click="close">确认</view>
			</view>
		</u-popup>
		<header-top :messageInfo="{typeFlag:true,message:'余额',liner:false}"></header-top>
		<!-- 账户余额(元) -->
		<view class="dingwei">
			<image class="yuetp" src="../../static/image/system/yue.png" mode=""></image>
			<view class="yuebjs">
				<view class="baisetext textcenter">￥{{yue}}</view>
				<view class="baisetext2 margin_top textcenter">账户余额(元)</view>
				<view class="flexcenter yitiaoxian mainpadding_top">
					<view class="txbtn" @click="tztx">
						<view class="flexleft">
							<view class="tixian margin_right1"></view>
							<view class="xbaitext">提现</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 余额明细 -->
		<view class="margin_top5 flexbetween">
			<view class="dingwei">
				<view class="titletext">余额明细</view>
				<view class="zibrijt"></view>
			</view>
			<view class="flexleft" @click="show = true">
				<view class="nostrongtext margin_right1">筛选</view>
				<view class="xiasanjiao"></view>
			</view>
		</view>
		<view class="kym" v-if="!list.data.length">
			<image src="../../static/image/system/zwtxjl.png" mode=""></image>
		</view>
		<view class="margin_top ffffff radius shadow mainpadding2" v-if="list.data.length">
			<view class="xiahuaxian padding_top" v-for="item in list.data" :key="item.id">
				<view class="flexbetween">
					<view class="strongtext">{{item.memo}}</view>
					<view class="chengsetext">{{item.money_text}}</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="huisetext">{{item.createtime_text}}</view>
					<view class="huisetext">{{item.type_status_text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// 时间
				startime: "开始时间",
				endtime: "结束时间",
				// 数据列表
				show: false,
				mindate: "",
				//开始时间
				zshow: false,
				value1: Number(new Date()),
				//结束
				yshow: false,
				value2: Number(new Date()),
				// 筛选
				timeList: [{
						id: 1,
						name: "今日"
					},
					{
						id: 2,
						name: "昨日"
					},
					{
						id: 3,
						name: "本月"
					},
					{
						id: 4,
						name: "上月"
					}
				],
				selecttime: 0, //筛选时间类型
				yue:'',
				page:1,
				limit:20,
				list:{
					data:[],
				},
				type:0,
			}
		},
		onLoad() {
			this.getuserinfo();
			this.getyuemx();
		},
		methods: {
			//余额明细
			getyuemx(isPage,page){
				let _this = this;
				httpRequest.request('api/user/getUserMoneyLog','POST',{
					start_time:_this.startime=="开始时间"?'':_this.startime,
					end_time:_this.endtime=="结束时间"?'':_this.endtime,
					page:page||1,
					limit:_this.limit,
					sx_type:_this.selecttime,
				}).then(res => {
					if(res.code == 1){
						let resList = res.data.data;
						if (isPage == true) {
							_this.list.data.push(...resList);
						} else {
							_this.list = res.data
							_this.list.data = resList;
						}
						// console.log(this.list,"数据列表")
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.total <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getyuemx(true, page);
			},
			
			//个人信息
			getuserinfo(){
				let _this = this;
				httpRequest.request('api/user/index','POST',{
				}).then(res => {
					_this.yue = res.data.money_text;
				})
			},
			// 跳转提现页面
			tztx(){
				uni.navigateTo({
					url:'/pages/mypage/tixian'
				})
			},
			zdysj() {
				this.selecttime = 0
				console.log("111111111111")
			},
			// 选择时间段
			selecTimeBtn(id) {
				this.mindate = ""
				this.selecttime = id
				this.startime = "开始时间"
				this.endtime = "结束时间"
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			// 开始时间
			zconfirm(e) {
				console.log(e)
				this.mindate = e.value
				this.startime = this.date(e.value)
				this.zshow = false
			},
			zshijian() {
				this.zshow = true
			},
			//结束时间
			yconfirm(e) {
				console.log(e)
				this.endtime = this.date(e.value)
				this.yshow = false
			},
			yshijian() {
				if (this.mindate == "") {
					return
				}
				this.yshow = true
			},
			close() {
				this.getyuemx()
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yuetp {
		width: 100%;
		height: 344rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.kym {
		margin: 150rpx auto 0;
		width: 319rpx;
		height: 267rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.xian {
		width: 22rpx;
		height: 0rpx;
		background-color: #999999;
		border: 1rpx solid #999999;
	}

	.shijianbtn {
		padding: 20rpx 65rpx;
		background: #F7F9FA;
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.huisebtn {
		width: 198rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background: #F7F9FA;
		border-radius: 41rpx;
	}

	.haungsebtn {
		width: 198rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #EF8933;
		background: rgba(239, 137, 51, .1);
		border-radius: 41rpx;
	}

	.sanshi {
		width: 33.33%;
	}

	.xiahuaxian:last-child {
		border-bottom: none;
		padding-bottom: 0rpx;
	}

	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.xiahuaxian {
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.03);
		padding-bottom: 30rpx;
	}

	.chengsetext {
		font-size: 32rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #EF8933;
	}

	.xiasanjiao {
		width: 12rpx;
		height: 10rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/xiasjx.png');
	}


	.tixian {
		width: 25.52rpx;
		height: 22.22rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/chongzhi.png');
	}

	.chongzi {
		height: 22.22rpx;
		width: 24.83rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/chongzhi.png');
	}

	.xbaitext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.yitiaoxian {
		border-top: 1rpx solid #FFFFFF;
	}

	.txbtn {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.czbtn {
		width: 50%;
		height: 73rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1rpx solid rgba(255, 255, 255, .3);
		border-right: 1rpx solid rgba(255, 255, 255, .3);
	}

	.baisetext2 {
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.baisetext {
		font-size: 80rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FFFFFF;
	}

	.yuebjs {
		position: absolute;
		top: 0;
		left: 0;
		background-size: 100% 100%;
		width: 100%;
		padding: 50rpx 0 0 0;
	}
</style>
